<script setup>
import api from '../api/notion_api.js'
import {ref,onMounted} from "vue";
import {ElMessageBox} from "element-plus";
import lodash from 'lodash'

// 定义绑定的数据
// 表格中的数据
const tableData=ref([]);

// 查询数据
const searchObj=ref({
  current:1,
  limit:10,
  title:'',
  content:'',
});
// 要修改或者新增的数据
const obj=ref({});

const total=ref(0);

const search = async () => {
  var result=await api.page(searchObj.value);
  tableData.value=result.data;
  total.value=result.count;
}
// 页面加载后要挂载的数据
onMounted(async ()=>{
  search();
});

// 定义方法
const handleSizeChange = () => {
  search();
}

const handleCurrentChange = () => {
  search();
}

const handlerSearch = () => {
  searchObj.value.current=1;
  search();
}

// 时间格式化函数
const formatDate = (dateString) => {
  if (!dateString) return ''

  try {
    // 创建日期对象
    const date = new Date(dateString)

    // 检查日期是否有效
    if (isNaN(date.getTime())) return dateString

    // 格式化为 YYYY-MM-DD HH:mm:ss
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  } catch (error) {
    console.error('日期格式化错误:', error)
    return dateString
  }
}

</script>

<template>
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 20px">
    <el-form-item label="公告标题">
      <el-input v-model="searchObj.title" placeholder="请输入公告标题" clearable />
    </el-form-item>

    <el-form-item label="公告内容">
      <el-input v-model="searchObj.content" placeholder="请输入公告内容" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>


  </el-form>

  <el-table :data="tableData" style="width: 100%">

    <el-table-column label="发布时间" width="200">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ formatDate(scope.row.create_time)}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="公告标题" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.title}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="公告内容">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span >{{ scope.row.content}}</span>
        </div>
      </template>
    </el-table-column>

  </el-table>

<!--分页-->
  <el-pagination
      style="margin-top:20px"
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

</template>

<style scoped></style>